<template>
    <div>
      <span>店铺优惠券</span>
      <el-card class="box-card">
        <el-form
          :inline="true"
          :model="formInline"
          class="demo-form-inline"
          ref="formInline"
          :rules="rules"
        >
          <el-col :span="10">
            <el-form-item label="店铺ID/名称：" prop="shopNameId">
              <el-input v-model="formInline.shopNameId"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="优惠券：" prop="couponName" >
              <el-input v-model="formInline.couponName" placeholder="优惠券名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
              <el-button @click="resetForm('formInline')">重置</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-card>
      <el-col :offset="12" :span="6" align="center">
      <el-tag type="info">发放总数量:{{grantSum}}张</el-tag>
      </el-col>
      <el-col :span="6" align="center">
      <el-tag type="warning">领取总金额:{{getMoney.toFixed(2)}}元</el-tag>
      </el-col>
      <el-table
        :data="couponList"
        stripe
        style="width: 100%"
      >
        <el-table-column
          align="center"
          v-for="(item,index) in couponListHD"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          width="207"
          >
            <template v-if="item.prop==='couponMoney'" v-slot="{ row }">
              <span>
                {{row.couponMoney.toFixed(2)}}元
              </span>
            </template>
            <template v-else-if="item.prop==='getMoney'" v-slot="{ row }">
              <span>
                {{row.getMoney.toFixed(2)}}元
              </span>
            </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="center" align="middle" style="height: 60px">
      <el-pagination
        background
        algin="center"
        layout="sizes, prev, pager, next"
        :current-page="pagination.page"
        :page-size="pagination.size"
        :total="pagination.total"
        :page-sizes="[2, 3, 5, 10]"
        @size-change="handleSizeChange"
        @current-change="changePage"
      >
      </el-pagination>
      </el-row>
    </div>
</template>

<script>
// 测试版
import { getCouponList } from '@/api/coupon'
import { queryFn } from '@/utils'
export default {
  name: 'couponShop',

  data () {
    return {
      formInline: {
        shopNameId: '',
        couponName: ''
      },
      rules: {
        couponName: [
          // { required: true, message: '商户ID/名称不能为空' }
        ],
        shopNameId: [
          // { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ]
      },
      couponList: [],
      couponListHD: [{
        prop: 'shopId',
        label: '店铺ID'
      }, {
        prop: 'shopName',
        label: '店铺名称'
      }, {
        prop: 'couponName',
        label: '优惠券名称'
      }, {
        prop: 'couponMoney',
        label: '优惠券金额/元'
      }, {
        prop: 'limitation',
        label: '使用金额限制'
      }, {
        prop: 'timing',
        label: '使用时限/天'
      }, {
        prop: 'grantSum',
        label: '发放总数量/张'
      }, {
        prop: 'getMoney',
        label: '领取金额/元'
      }],
      pagination: {
        page: 1,
        size: 5,
        total: 7
      }
    }
  },
  created () {
    this.getCouponList()
  },
  mounted () {

  },
  computed: {
    grantSum () {
      let sum = 0
      this.couponList.forEach(item => {
        sum += item.couponMoney
      })
      return sum
    },
    getMoney () {
      let sum = 0
      this.couponList.forEach(item => {
        sum += item.getMoney
      })
      return sum
    }
  },
  methods: {
    changePage (newpage) {
      this.pagination.page = newpage
      this.getCouponList()
    },
    handleSizeChange (newsize) {
      this.pagination.size = newsize
      this.getCouponList()
    },
    async getCouponList () {
      const { data } = await getCouponList({
        _page: this.pagination.page,
        _limit: this.pagination.size
      })
      this.couponList = data
    },
    async onSubmit () {
      const res = queryFn({
        id: +this.formInline.shopNameId ? +this.formInline.shopNameId : '',
        shopName: +this.formInline.shopNameId ? '' : this.formInline.shopNameId,
        couponName: this.formInline.couponName
      })
      const { data } = await getCouponList(res)
      this.couponList = data
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="less" scoped>
.box-card {
    width: 100%;
    margin: 20px 0;
}
</style>
